<template>
  <div class="base-container">
    <t-space>
      <t-card title="选择要分配的表单" header-bordered>
        <!-- 单选 -->
        <t-radio-group size="small" v-model="checkedTable">
          <t-space direction="vertical">
            <t-radio v-show="false" />
            <div v-for="table in tables" :key="table.id">
              <t-radio :value="table.id">{{table.name}}</t-radio>
            </div>
          </t-space>
        </t-radio-group>
        <!-- 多选 -->
        <!-- <t-checkbox-group v-model="selecteTables">
          <t-space direction="vertical">
            <t-checkbox v-show="false" />
            <div class="line" v-for="table in tables" :key="table.path">
              <t-checkbox :value="table.name">{{ table.name }}</t-checkbox>
            </div>
          </t-space>
        </t-checkbox-group> -->
      </t-card>
      <t-card title="选择要分配的单位" header-bordered>
        <template #actions>
          <t-button @click="bindTableToUnits" :disabled="disableAssignBtn">分配表单</t-button>
        </template>
        <dept-select-vue :data="deptOptions" @select="(depIds) => (selectedDepts = depIds)"></dept-select-vue>
      </t-card>
    </t-space>
  </div>
</template>

<script>
import DeptSelectVue from './components/DeptSelect.vue';
import { treeselect } from '@/api/system/dept';

export default {
  name: 'assignment',
  components: { DeptSelectVue },
  data() {
    return {
      checkedTable: -1,
      // selecteTables: [],
      selectedDepts: [],
      deptOptions: [], // 单位树
      tables: [],
    };
  },
  computed: {
    disableAssignBtn() {
      return this.selectedDepts.length === 0 || this.checkedTable === -1;
    },
  },
  created() {
    this.getTreeselect();
    this.getAllTableInfo();
  },
  methods: {
    getAllTableInfo() {
      this.$api.kjtjdc.table.getTableList().then(({ rows }) => {
        this.tables = rows;
      });
    },
    getTreeselect() {
      treeselect()
        .then((res) => {
          this.deptOptions = res.data;
        })
        .catch((e) => {
          this.$message.error(e.toString());
        });
    },
    bindTableToUnits() {
      const { selectedDepts, checkedTable, $message } = this
      this.$api.kjtjdc.manage.addTableForUnits({unitIds: selectedDepts, tableId: checkedTable }).then(res => {
        if (res.code === 200) {
          $message.success('绑定成功')
        } else {
          $message.error('绑定失败！请联系管理员')
        }
      })
    },
  },
};
</script>

<style lang="less" scoped>
.line {
  display: block;
}
</style>
